<template>
	<view class="new-search">
		<!-- 搜索输入框 -->
		<view class="search-top">
			<view class="search-top-content">
				<input class="search-top-content-input" v-model="text" type="text" placeholder="新车搜索" placeholder-style="font-size: 28rpx;color: #999;"  @change="inputSearch"/>
				<uni-icons type="search" size="16" color="#999"></uni-icons>
			</view>
			<!-- <view class="search-top-btn">搜索</view> -->
		</view>
		<view class="search_main">
			
		
		<view class="search-pirce">
			<view class="search-pirce-title">价格(万): </view>
			<view class="search-pirce-list">
				<!-- <view class="search-pirce-li" :class="active==1?'search-pirce-li_active':''" @click="priceTap(1,15,0)">15万以下</view> -->
				<view class="search-pirce-li"  @click="priceTap(1,15,0)">15万以下</view>
				<view class="search-pirce-li"  @click="priceTap(2,20,15)">15-20</view>
				<view class="search-pirce-li"  @click="priceTap(3,30,20)">20-30</view>
				<view class="search-pirce-li"  @click="priceTap(4,50,30)">30-50</view>
			</view>
		</view>
		<view class="search-hot">
			<view class="search-hot-title">热门品牌: </view>
			<view class="search-hot-list">
				<view class="search-hot-li" v-for = "(item,index) in hotBrandList" :key="index" @click="brankSearch(item)">
					
					<view class="hot_img">
						<image :src="https+item.brandLogo" mode="aspectFill"></image> 
					</view>
					<view class="hot_name">{{item.brandName}}</view></view>
			</view>
			<view class="looker-more" @click="moreNewCar">查看更多</view>
		</view>
	</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		name:"newCarSearch",
		props:{
			hotBrandList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				active:1,
				https: getApp().globalData.picturePath,
				price:{
					guidePriceMax:"",
					guidePriceMin:""
				}
			};
		},
		methods:{
			priceTap(index,guidePriceMax,guidePriceMin){
				// this.active = index
				this.price.guidePriceMax = guidePriceMax,
				this.price.guidePriceMin = guidePriceMin
				uni.navigateTo({
					url:`/pagesA/buyCar/newCarFilter?price=${encodeURIComponent(JSON.stringify(this.price))}`,
				})
			},
			brankSearch(item){
				uni.navigateTo({
					url:`/pagesA/buyCar/newCarFilter?brand=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			inputSearch(e){
				console.log(e.detail.value);
				uni.navigateTo({
					url:'/pagesA/buyCar/newCarFilter?input='+ e.detail.value,
				})
			},
			moreNewCar(){
				uni.navigateTo({
					url:'/pagesA/buyCar/newCarFilter',
				}
			  )
			},
			
		}
	}
</script>

<style lang="scss">
	.new-search{
		// background-color: $uni-bg-color;
		display: flex;
		flex-direction: column;
		flex: 1;
		box-sizing: border-box;
		.search-top{
			background-color: #f8f8f8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx $uni-widthspace;
			box-sizing: border-box;
			.search-top-content{
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx $uni-widthspace;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10rpx;
				.search-top-content-input{
					font-size: 28rpx;
					color: #333;
				}
			}
			.search-top-btn{
				text-align: center;
				margin-left: $uni-widthspace;
				font-size: 28rpx;
				color: #666;
			}
		}
		.search-pirce{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			line-height: 50rpx;
			background-color: #fff;
			.search-pirce-title{
				font-size: 30rpx;
				font-weight: bolder;
				color: #333;
			}
			.search-pirce-list{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.search-pirce-li{
					flex: 1;
					border: 2rpx solid #999;
					font-size: 26rpx;
					color: #333;
					text-align: center;
					margin-left: 20rpx;
					border-radius: 8rpx;
				}
				.search-pirce-li_active{
					color: #fff !important;
					background-color: $car-basic-color !important;
					border: 2rpx solid $car-basic-color !important;
				}
			}
		}
		.search-hot{
			padding: 0rpx 24rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			.search-hot-title{
				font-size: 30rpx;
				font-weight: bolder;
				color: #333;
				line-height: 60rpx;
			}
			.search-hot-list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0rpx;
				box-sizing: border-box;
				.search-hot-li{
					flex: 1;
					margin-left: 20rpx;
					height: auto;
					border-radius: 8rpx;
					&:first-of-type{
						margin-left: 0rpx;
					}
					.hot_img{
						width: 100%;
						height: 0;
						padding-top:100%;
						// background: url(../../pagesA/static/no_picture.jpg);
						background-size: cover;
						position: relative;
						image{
							width: 100%;
							height: 100%;
							object-fit: cover;
							position: absolute;
							left: 0;
							top:0
						}
					}
					.hot_name{
						text-align: center;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						line-height: 60rpx;
					}
					
				}
			}
			.looker-more{
				line-height: 70rpx;
				text-align: center;
				background-color: #f7f7f7;
				font-size: 30rpx;
				color: #333;
				margin-top: 20rpx;
			}
		}
	}
	// .search_main{
	// 	margin: 0 24rpx;
	// 	border-radius: 10rpx;
	// 	background-color: #fff;
	// }
</style>
